<template>
	<div class="v-view">
		<Breadcrumb moduleName="通知">
			<Shortcuts slot="content"></Shortcuts>
		</Breadcrumb>
		<div class="state">
			<div class="navstate">
				<a-tabs default-active-key="1" @change="callback">
					<a-tab-pane key="1" tab="通知">
						<div class="Kanbandynamics">
							<div class="icon">
								<a-icon type="border-outer" />
							</div>

							<div class="details">
								<p>看板动态</p>
								<div>
									icoco 共享了看板
									<span class="fenbu" @click="Channeldistribute">渠道分布</span> 给我
								</div>
								<span class="timeshow">2021-08-09 15:43:20</span>
							</div>
						</div>

						<div class="Kanbandynamics">
							<div class="icon">
								<a-icon type="border-outer" />
							</div>

							<div class="details">
								<p>导出完成-支付订单的总次数_事件分析</p>
								<div>_2021-08-02至2021--08-07</div>
								<span class="timeshow">2021-08-09 15:43:20</span>
								<div class="files">
									<a-icon type="vertical-align-bottom" />下载文件
								</div>
							</div>
						</div>
					</a-tab-pane>

					<a-tab-pane key="2" tab="未读" force-render>未读</a-tab-pane>
					<a-tab-pane key="3" tab="全部标记为已读">全部标记为已读</a-tab-pane>
				</a-tabs>
			</div>
		</div>
	</div>
</template>

<script lang="ts">
import { Component, Vue } from 'vue-property-decorator'
import Breadcrumb from '@/layout/components/Breadcrumb/index.vue'

@Component({
	components: {
		Breadcrumb
	}
})
export default class Notice extends Vue {
	callback(key: any) {
		console.log(key)
	}

	Channeldistribute() {
		this.$router.push
	}
}
</script>

<style lang="scss" scoped>
.v-view {
	height: 100%;
}

.Kanbandynamics {
	display: flex;
	width: 300px;
	background: #ccc;
	height: 120px;
	margin-bottom: 15px;
	.icon {
		margin: 20px 10px;
	}
	.details {
		margin: 20px 0;
		.timeshow {
			font-size: 12px;
		}
	}
	.files,
	.fenbu {
		color: #4c90ff;
		&:hover {
			cursor: pointer;
		}
	}
}
</style>